<template>
	<div class="page-wrap">
		<!-- <div style="color: rgb(27, 76, 184);margin-bottom: 15px">
			<div class="addressIcon"></div>
			<span>当前位置：</span>
			<span style="cursor: pointer" @click="returnImage">指导书管理</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333" v-text="guidbookname">{{guidbookname}}</span>
		</div> -->
		<div class="page-content" :style="{height:contentHei}">
			<div class="img-header">
				<div style="font-weight: 700;font-size: 18px">{{titleText}}</div>
			</div>
			<Divider />
			<div class="content-wrap">
				<Row :gutter="16" style="height: 100%">
					<Col span="6" style="height: 100%">
					<div class="left-hei">
						<Card v-for="(item,index) in sectionData" :key="item.sectionid" style="margin-bottom: 15px;cursor: pointer" :class="{titleActive :sectionId && item.sectionid == sectionId}">
							<div class="title-content" @click="echoData(item)">
								<div class="title-name">
									<img title="关键点" height="16" :style="{'margin-right':'5px','visibility': item.ischeckpoint == 1 ? 'visile' : 'hidden'}" src="../../assets/globalIcon/section-key.png">
									<div style="font-weight: bold;font-size: 16px">第{{index+1}}节</div>
									<Divider type="vertical" />
									<div v-text="item.sectionname">{{item.sectionname}}</div>
								</div>
								<div>
									<img src="../../assets/globalIcon/dis-del.png" @click.stop="showDelSectionPop(item)" v-if="guideInfo.expUsed">
									<Poptip v-model="item.visibleDelSectionPop" transfer confirm placement="left" title="确定要删除该段落吗？" @on-ok="delSection(item)" v-else>
										<div>
											<img src="../../assets/globalIcon/del.png" @click.stop="showDelSectionPop(item)">
										</div>
									</Poptip>
								</div>
							</div>
						</Card>
					</div>
					<div style="margin-top: 15px;display: flex;justify-content: space-between;align-items: center">
						<div>
						</div>
						<div>
							<Button type="primary" size="large" @click="returnImage">完成</Button>
						</div>
					</div>
					</Col>
					<Col span="18" style="height: 100%">
					<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
						<FormItem label="名称" prop="name" style="width: 300px;display: inline-block;margin-left: 48px">
							<Input v-model.trim="formValidate.name" placeholder="名称"></Input>
						</FormItem>
						<!--<FormItem label="类型" prop="sectionType" style="width: 300px;display: inline-block">
                            <Select filterable v-model="formValidate.sectionType" placeholder="类型">
                                <Option value="1">多媒体</Option>
                                <Option value="2">简单文本</Option>
                                <Option value="3">试题</Option>
                                <Option value="4">简单文本+试题</Option>
                            </Select>
                        </FormItem>-->
						<FormItem label="关键点" prop="IsCheckpoint" style="width: 200px;display: inline-block">
							<RadioGroup v-model="formValidate.IsCheckpoint">
								<Radio label="1">是</Radio>
								<Radio label="0">否</Radio>
							</RadioGroup>
						</FormItem>
						<!--<FormItem label="排序" prop="no" style="display: inline-block">
                            <InputNumber :max="99" :min="1" v-model="formValidate.no" style="width: 200px;" placeholder="请输入1-100的整数"></InputNumber>-->
						<!--<span style="color:#f90;font-size:10px;line-height: 2;"><Icon type="ios-information-circle-outline" />{{useNos}}已经被使用</span>-->
						<!--</FormItem>-->
						<FormItem>
							<quill-editor v-model="content" class="editor" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
							</quill-editor>
						</FormItem>
						<FormItem>
							<Button type="primary" @click="creatBtn('formValidate')" :loading="subLoading" :disabled="sectionData.length > 98 || guideInfo.expUsed">新建章节</Button>
							<Button type="primary" @click="modifyBtn('formValidate')" :loading="subLoading" style="margin-left: 8px">修改章节</Button>
							<Button @click="handleReset('formValidate')" style="margin-left: 8px" :disabled="guideInfo.expUsed">重置</Button>
							<Button type="primary" @click="showAddQuestionModal" :disabled="!sectionId || questionTotal >= 5 || guideInfo.expUsed" style="float:right">添加题目</Button><span style="color:#f90;float:right;"> <Icon type="ios-information-circle-outline" />添加题目前请先选择段落，每个段落最多可添加5个题目</span>
						</FormItem>
					</Form>
					<!--v-if="sectionId"-->
					<div style="margin-left:100px;">
						<Divider>段落题目</Divider>
						<section-question ref="showSectionQuestion" @getQuestionTotal="setQuestionTotal" :sectionId="sectionId" :guideID="guideID" :expUsed="guideInfo.expUsed" :isPublic="guideInfo.ispublic" :isOwn="isOwn" v-if="sectionId && guideID">
						</section-question>
					</div>
					</Col>
				</Row>
			</div>
		</div>

		<!--图片列表-->
		<Modal v-model="showImglist" width="1000" :footer-hide="true" :mask-closable="false" title="图片列表(指导书的可见范围为单位时,不允许选择个人资源)">
			<search-table
				:columns="videoCol" 
				:data="videoList" 
				:loading="fileListLoading"
				:total='videoTotal' 
				:size="videoPageSize" 
				:page="videoPage"
				@change-page="videoOnChange"
			>
				<template slot="search">
					<Input v-model.trim="searchFileName" placeholder="名称" style="width: 180px;" clearable @on-change="searchFile" />
					<Select filterable clearable v-model="searchFilePublic" placeholder="可见范围" style="width: 150px;margin-left: 15px" @on-change="searchFile">
						<Option value="public">系统</Option>
						<Option value="share">单位</Option>
						<Option value="private">个人</Option>
					</Select>
				</template>
			</search-table>
			<!-- <div style="display: flex;justify-content: space-between;margin-bottom: 15px">
				<div>
					<Input v-model.trim="searchFileName" placeholder="名称" style="width: 180px;" clearable @on-change="searchFile" />
					<Select filterable clearable v-model="searchFilePublic" placeholder="可见范围" style="width: 150px;margin-left: 15px" @on-change="searchFile">
						<Option value="public">系统</Option>
						<Option value="share">单位</Option>
						<Option value="private">个人</Option>
					</Select>
				</div>
				<Page :total='videoTotal' :page-size="videoPageSize" :current="videoPage" show-total 
					v-if="videoTotal" show-elevator @on-change="videoOnChange" />
			</div>
			<Table border :columns="videoCol" :data="videoList" :loading="fileListLoading"></Table> -->
		</Modal>
	</div>
</template>
<script>
	import $ from 'jquery'
	import encryption from '@/libs/encryption.js'
	import {
		sectionList,
		creatSection,
		modifySection,
		delSection,
		getGuideInfoByID
	} from '@/api/guide.js'
	import {
		getFilesData
	} from '@/api/uploadFile.js'
	import cookieUse from '@/libs/cookie.js'
	import Quill from 'quill'
	import {
		quillEditor
	} from "vue-quill-editor"; // 调用编辑器
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	// 粘贴图片上传
	import {
		ImageExtend
	} from './image-parse'
	Quill.register('modules/ImageExtend', ImageExtend)
	import ImageResize from 'quill-image-resize-module'
	Quill.register('modules/ImageResize', ImageResize);
	import SectionQuestion from './sectionQuestion'
import { escapeScript, html2Escape } from '@/libs/utils'
	import { validateNameCustom,newValidationRules} from '@/libs/reg.js'
	const toolbarOptions = [
		["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
		["blockquote", "code-block"], // 引用  代码块
		[{
			header: 1
		}, {
			header: 2
		}], // 1、2 级标题
		[{
			list: "ordered"
		}, {
			list: "bullet"
		}], // 有序、无序列表
		[{
			script: "sub"
		}, {
			script: "super"
		}], // 上标/下标
		[{
			indent: "-1"
		}, {
			indent: "+1"
		}], // 缩进
		// [{'direction': 'rtl'}],                         // 文本方向
		[{
			size: ["small", false, "large", "huge"]
		}], // 字体大小
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}], // 标题
		[{
			color: []
		}, {
			background: []
		}], // 字体颜色、字体背景颜色
		//    [{ font: [] }], // 字体种类
		[{
			align: []
		}], // 对齐方式
		["clean"], // 清除文本格式
		['link', "image"] // 链接、图片、视频
	];
	export default {
		components: {
			quillEditor,
			SectionQuestion
		},
		data() {
			const validateNum = (rule, value, callback) => { //验证只能填入数字
				var reg = new RegExp("^([1-9]|[1-9]\\d|100)$");
				let _this = this;
				//验证警戒值
				if(value || value === 0) {
					if(!reg.test(_this.formValidate.no)) {
						callback(new Error('请输入1-100的整数'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const validateName = (rule, value, callback) => {
				//验证警戒值
				if(value) {
					validateNameCustom(rule, value, callback, 128)
				} else {
					callback()
				}
			}
			let September = sessionStorage.getItem('November')
			September = JSON.parse(encryption.SelfUseDecrypt(September));
			return {
				USER_ID: September.userId,
				fullHeight: document.documentElement.clientHeight,
				fullWidth: document.documentElement.clientWidth,
				contentHei: 'auto',
				// 页面标题
				titleText: '段落管理',
				// 指导书id
				guideID: '',
				guidbookname: '',
				// 段落列表
				sectionData: [],
				// 创建段落
				formValidate: {
					name: '',
					sectionType: '2',
					IsCheckpoint: '1',
					no: 1
				},
				ruleValidate: {
					name: [{
						required: true,
						max: 64,
						message: '段落名称长度为1—64个字符',
						trigger: 'change'
					},
					{ validator: validateName, trigger: 'change' }
					],
					orderNum: [{
						required: true
					}],
					sectionType: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}],
					IsCheckpoint: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					no: [{
						required: true,
						type: 'number',
						max: 100,
						min: 1,
						validator: validateNum,
						trigger: 'change'
					}],
				},
				content: '',
				editorOption: {
					modules: {
						clipboard: {
							// 粘贴过滤
							//			              matchers: [[Node.ELEMENT_NODE, this.HandleCustomMatcher]],
							//			              matchVisual: false
						},
						toolbar: {
							container: toolbarOptions, //工具菜单栏配置
							handlers: {
								'image': (value) => {
									if(value) {
										this.insertImg()
									} else {
										this.quill.format('image', false);
									}
								}
							}
						},
						ImageExtend: {
							loading: true,
							name: 'file',
							size: 2,
							sizeError: () => {
								this.$Message.error('图片大小不能超过2M');
							},
							headers: (xhr) => {
								xhr.setRequestHeader('Authorization', cookieUse.getCookie('desig-token'))
							}, // 可选参数 设置请求头部
							start: () => { //开始上传触发事件

							},
							change: (xhr, FormData) => {

							},
							action: '/api/minio/upload/permanent?visibility=company&type=images&bucket=images',
							error: () => {
								this.$Message.error('文件上传失败');
							},
							response: (res) => {
								if(res.code == 1) {
									let src = res.data;
									return `/Learn/${src}`
								} else if(res.code == -9599) {
									this.$Message.error({
										content: res.message,
										duration: 2,
									})
									setTimeout(() => {
										// this.$router.push({
										// 	path: '/login',
										// })
										cookieUse.setCookie('desig-token', '', 0)
                    window.openLogin(this.$router)
									}, 2000)
								} else {
									this.$Message.error('文件上传失败');
								}
							}
						},
						ImageResize: {
							displayStyles: { //添加
								zIndex: 0
							},
							modules: ['Resize', 'DisplaySize']
								// See optional "config" below
						}
					},
					placeholder: '可以在编辑器直接贴图', //提示
				},
				subLoading: false,
				// 编辑插入图片
				showImglist: false,
				videoPage: 1,
				videoPageSize: 10,
				videoList: [],
				videoTotal: 0,
				videoCol: [{
					title: '名称',
					key: 'originName',
					align: 'center',
				}, {
					title: 'ID',
					key: 'id',
					align: 'center',
				}, {
					title: '文件大小',
					key: 'size',
					align: 'center',
					width: 120,
					render: (h, params) => {
						return h('span', this.getSize(params.row.size))
					}
				}, {
					title: '可见范围',
					key: 'visibility',
					align: 'center',
					width: 80,
					render: (h, params) => {
						return h('span', {
							style: {
								color: this.setVisibility(params.row.visibility).color
							}
						}, this.setVisibility(params.row.visibility).text)
					}
				}, {
					title: '内容',
					key: 'check',
					align: 'center',
					width: 100,
					render: (h, params) => {
						return h('div', [
							h('a', {
								on: {
									click: () => {
										this.checkInfo(params);
									}
								}
							}, '查看')
						]);
					}
				}, {
					title: '创建时间',
					key: 'created',
					align: 'center',
				}, {
					title: '操作',
					key: 'action',
					width: 100,
					align: 'center',
					render: (h, params) => {
						return h('div', [
							[
								h('Button', {
									props: {
										type: 'info',
										size: 'small',
										disabled: params.row.visibility == 'private' && (this.guideInfo.ispublic === 1 || !this.isOwn)
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.useImg(params)
										}
									}
								}, '使用')
							],
						]);
					}
				}, ],
				videoData(val) {
					let data = [];
					for(let i = 0; i < val.length; i++) {
						let fileName = val[i]['fileName'];
						fileName = fileName.split('.')[0];
						data.push({
							fileName: fileName,
							filePath: val[i]['filePath'],
							fileType: val[i]['fileType'],
							fileTime: val[i]['fileTime'],
							fileId: val[i]['fileId'],
							fileSize: val[i]['fileSize'],
						})
					}
					return data;
				},
				fileListLoading: false,
				searchFileName: '',
				searchFilePublic: '',
				// 记录回显的数据
				orderNum: 0,
				sectionId: '',
				isCreat: true,
				btnText: '新建提交',
				showAddQuestion: false,
				showTab: 'info',
				questionTotal: 0,
				guideInfo: {} //指导书详情
			}
		},
		created() {

		},
		computed: {
			'useNos': function() {
				return [...new Set(this.sectionData.map(section => section.no))].join(',')
			},
			isOwn: function() {
				return this.USER_ID == this.guideInfo.designer
			}
		},
		mounted() {
			this.setStyle()
			window.onresize = () => {
				this.setStyle()
			}
			this.guideID = this.$route.query.guidbookid
			this.guidbookname = this.$route.query.guidbookname
			this.addBreadItem({ name: this.guidbookname });
				// 查询段落信息
			this.queryList()
				//获取指导书详情
			this.getGuideInfo();
		},
		beforeRouteLeave(to, from, next) {
			if(to.path === '/guide') {
				to.query.page = this.$route.query.page
				next()
			} else {
				sessionStorage.removeItem('queryObj');
				next()
			}
		},
		methods: {
			// 设置高度
			setStyle() {
				window.fullHeight = document.documentElement.clientHeight;
				window.fullWidth = document.documentElement.clientWidth;
				this.fullHeight = window.fullHeight;
				this.fullWidth = window.fullWidth;
				this.contentHei = this.fullHeight - 60 - 21 + 'px' // 80是头部高度  60是上下padding
				let hei = this.fullHeight - 60 - 21 - 96 - 114 - 74 + 'px'
				$('.content-wrap .ql-container').css('height', hei)
			},
			// 返回指导书管理
			returnImage() {
				this.$router.push({
					name: 'guide',
					query: {
						page: this.$route.query.page,
					}
				})
			},
			// 段落列表
			queryList() {
				sectionList(this.guideID)
					.then(data => {
						if(data.code == 1) {
							this.sectionData = data.attribute.datalist;
						}
					})
					.catch(err => {
					})
			},
			initData() {
				this.formValidate.name = '';
				this.content = '';
				this.sectionId = '';
				let noArr = this.sectionData.map(sec => sec.no).sort((a, b) => {
					return a - b;
				})
				if(noArr.length > 0 && !this.sectionId) {
					this.formValidate.no = noArr[noArr.length - 1] + 1;
				}
			},
			getGuideInfo() {
				getGuideInfoByID(this.guideID).then(data => {
					if(data.code == 1) {
						this.guideInfo = data.attribute.data;
					} else {
						this.guideInfo = {};
						this.$Message.error(data.message);
					}
				}).catch(error => {
				})
			},
			// 编辑器
			onEditorBlur() {}, // 失去焦点事件
			onEditorFocus() {}, // 获得焦点事件
			onEditorChange() {}, // 内容改变事件
			// 插入图片
			insertImg() {
				this.showImglist = true;
				this.searchFileName = '';
				this.searchFilePublic = '';
				this.getVideoList()
			},
			getVideoList() {
				let params = {
					pageIndex: this.videoPage,
					pageSize: this.videoPageSize
				}
				let data = {
					bucket: 'images'
				}
				if($.trim(this.searchFileName) != '') {
					data.originName = $.trim(this.searchFileName)
				}
				if(this.searchFilePublic) {
					data.visibility = this.searchFilePublic
				}
				this.fileListLoading = true
				getFilesData(params, data)
					.then((res) => {
						if(res.data.code == 1) {
							let attribute = res.data.data;
							this.videoTotal = attribute.total;
							this.videoList = attribute.list;
						}
						this.fileListLoading = false
					})
					.catch((err) => {
						this.fileListLoading = false
					})
			},
			videoOnChange(val) {
				this.videoPage = val;
				this.getVideoList();
			},
			searchFile(val) {
				this.videoPage = 1
				this.getVideoList();
			},
			checkInfo(params) {
				let path = params.row.path;
				window.openTrain(`/api/minio/filePreview?path=${path}`);
			},
			// 使用
			useImg(params) {
				// 获取富文本组件实例
				let quill = ''
				if(this.showImglist) {
					quill = this.$refs.myQuillEditor.quill
				}
				// if(this.reSectionModal){
				//     quill = this.$refs.reQuillEditor.quill
				// }
				// 获取光标所在位置
				let selction = quill.getSelection() || {};
				let length = selction.index ? selction.index : 0;
				// 插入图片，res为服务器返回的图片链接地址
				let url = `/Learn${params.row.path}`
				quill.insertEmbed(length, 'image', url);
				// 调整光标到最后
				quill.setSelection(length + 1)
				this.showImglist = false
			},
			// 回显
			echoData(item) {
				this.isCreat = false
				this.btnText = '修改提交'
				this.orderNum = item.no
				this.sectionId = item.sectionid
				this.formValidate.name = item.sectionname
				this.formValidate.sectionType = item.sectiontype + ''
				this.formValidate.IsCheckpoint = item.ischeckpoint + ''
				this.formValidate.no = item.no
				this.content = escapeScript(item.sectiontext)
			},
			// 创建按钮
			creatBtn(name) {
				this.isCreat = true
				this.submitBtn(name)
			},
			// 修改提交
			modifyBtn(name) {
				if(this.sectionId) {
					this.isCreat = false
					this.submitBtn(name)
				} else {
					this.$Message.info({
						content: '请选择需要修改的段落',
						duration: 3,
					})
				}
			},
			// 提交按钮
			submitBtn(name) {
				if(this.isCreat) {
					this.handleSubmit(name)
				} else {
					this.modifySubmit(name)
				}
			},
			// 创建段落
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					//              	if(this.useNos.includes(this.formValidate.no)){
					//		      			this.$Message.warning('排序已经被使用');
					//		      			return;
					//		      		}
					if(valid) {
						let formData = {};
						formData.sectionname = this.formValidate.name;
						formData.sectioncname = this.formValidate.name;
						let noArr = this.sectionData.map(sec => sec.no).sort((a, b) => {
							return a - b;
						})
						if(noArr.length > 0) {
							formData.no = noArr[noArr.length - 1] + 1;
						} else {
							formData.no = 1;
						}
						//formData.no = this.formValidate.no; //this.sectionData.length + 1;
						formData.sectiontype = parseInt(this.formValidate.sectionType);
						formData.ischeckpoint = parseInt(this.formValidate.IsCheckpoint);
						formData.sectiontext = html2Escape(this.content.replace(/class="ql-syntax"/g, 'style="background-color: #23241f;color: #f8f8f2;white-space: pre-wrap;margin-bottom: 5px;margin-top: 5px;padding: 5px 10px;border-radius: 3px;"'));
						// 手动加
						formData.dirlevel = 1;
						formData.guidbookid = this.guideID;
						formData.updatetime = '';
						this.subLoading = true
						creatSection(formData)
							.then(data => {
								if(data.code == 1) {
									this.queryList();
									this.$Message.success({
										content: '创建成功！',
										duration: 3,
									});
									this.sectionId = ''
									this.content = '';
									this.handleReset('formValidate');
								} else {
									this.$Message.error('创建失败！')
								}
								this.subLoading = false
							})
							.catch(err => {
								this.subLoading = false
							})
					} else {
						this.$Message.error('请完善信息！');
					}
				})
			},
			handleReset(name) {
				this.content = ''
				this.$refs[name].resetFields();
			},
			// 修改段落
			modifySubmit(name) {
				this.$refs[name].validate((valid) => {
					if(this.useNos.includes(this.formValidate.no) && (this.formValidate.no != this.orderNum)) {
						this.$Message.warning('排序已经被使用');
						return;
					}
					if(valid) {
						let formData = {};
						formData.sectionname = this.formValidate.name;
						formData.sectioncname = this.formValidate.name;
						formData.sectiontype = parseInt(this.formValidate.sectionType);
						//                      formData.no = this.orderNum;
						formData.ischeckpoint = parseInt(this.formValidate.IsCheckpoint);
						formData.sectiontext = html2Escape(this.content.replace(/class="ql-syntax"/g, 'style="background-color: #23241f;color: #f8f8f2;white-space: pre-wrap;margin-bottom: 5px;margin-top: 5px;padding: 5px 10px;border-radius: 3px;"'));
						formData.no = this.formValidate.no;
						formData.guidbookid = this.guideID;
						modifySection(formData, this.sectionId)
							.then(data => {
								if(data.code == 1) {
									this.$Message.success({
										content: '修改成功！',
										duration: 3,
									});
									//                                  this.sectionId = ''
									this.queryList();
								} else {
									this.$Message.error({
										content: '修改失败！',
										duration: 3,
									});
								}
							})
							.catch(err => {
							})
					} else {
						this.$Message.error('请完善信息！');
					}
				})
			},
			// 删除段落
			delSection(item) {
				delSection(item.sectionid)
					.then(data => {
						if(data.code === 1) {
							this.$Message.success({
								content: '删除成功',
								duration: 3
							})
							this.formValidate.name = ''
							this.formValidate.sectionType = '2'
							this.formValidate.IsCheckpoint = '1'
							this.content = ''
							this.queryList()
						} else {
							this.$Message.warning({
								content: data.message,
								duration: 3
							})
						}
					})
					.catch(err => {
					})
			},
			showAddQuestionEle() {
				this.showAddQuestion = true;
			},
			showAddQuestionModal() {
				if(!this.sectionId) {
					this.$Message.warning({
						content: '请先选择段落',
						duration: 3
					})
					return;
				}
				this.showAddQuestion = true;
				this.$refs.showSectionQuestion.addObjectiveQuestion('', 'add')
			},
			setQuestionTotal(count) {
				this.questionTotal = count;
			},
			changeTab(tab) {
				this.showTab = tab;
			},
			showDelSectionPop(item) {
				this.sectionData.forEach(section => {
					this.$set(section, 'visibleDelSectionPop', false)
				})
				this.$set(item, 'visibleDelSectionPop', true)
			},
			HandleCustomMatcher(node, Delta) {
				// 文字、图片等，从别处复制而来，清除自带样式，转为纯文本
				let ops = []
				Delta.ops.forEach(op => {
					if(op.insert && op.insert != "" && !op.insert.image) { //&& typeof op.insert === 'string' && 
						ops.push(op);
						//		          ops.push({
						//		            insert: op.insert
						//		          })
					}
				})
				Delta.ops = ops
				return Delta
			},
			// 设置可见范围
			setVisibility(val) {
				let obj = {}
				let text = ''
				let color = ''
				if(val === 'share') {
					text = '单位'
					color = '#32CD32'
				} else if(val === 'private') {
					text = '个人'
					color = '#FFA500'
				} else if(val === 'public') {
					text = '系统'
					color = '#4169E1'
				}
				obj.text = text
				obj.color = color
				return obj
			},
			getSize(val) {
				let type = ''
				if(val > (1024 * 1024)) {
					val = val / (1024 * 1024)
					type = ' MB'
				} else {
					val = val / 1024
					type = ' KB'
				}
				val = val.toFixed(2)
				return val + '' + type
			},
		},
	}
</script>
<style scoped>
	
	.page-content {
		background-color: #fff;
		border-radius: 10px;
	}
	
	.img-header {
		display: flex;
		justify-content: space-between;
		padding: 20px 20px 0 20px;
	}
	
	.addressIcon {
		display: inline-block;
		height: 14px;
		width: 12px;
		background: url("../../assets/globalIcon/addressIcon.png") no-repeat center;
		background-size: 100% 100%;
		margin-bottom: -1px;
	}
	
	.content-wrap {
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0 20px 20px 20px;
		height: calc(100% - 96px);
	}
	
	.left-hei {
		overflow-x: hidden;
		overflow-y: auto;
		/*padding-right: 8px;*/
		max-height: calc(100% - 66px);
		/*padding-top: 17px;*/
	}
	.title-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 0;
	}
	
	.titleActive {
		border: 1px solid #1563C2 ;
	}
	
	.title-name {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.page-wrap /deep/.editor .ql-container.ql-snow {
		overflow: hidden auto;
	}
	
	.page-wrap /deep/.editor .ql-editor {
		overflow: auto;
	}
</style>
<style>
	.left-hei .ivu-card {
		position: inherit;
	}
	
	.left-hei .ivu-card-body {
		padding: 0 16px;
	}
</style>